<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="checkedBox flex items-center mb-4">
                <span>用户昵称：</span>
                <el-input v-model="listQuery.name" placeholder="请输入" size="normal" clearable></el-input>
                <span style="text-align: right;">用户编号：</span>
                <el-input v-model="listQuery.name" placeholder="请输入" size="normal" clearable></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div>
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="打工开始时间" prop="id"></el-table-column>
                <el-table-column label="用户ID" prop="name"></el-table-column>
                <el-table-column label="用户编号" prop="icon"></el-table-column>
                <el-table-column label="用户昵称" prop="type"></el-table-column>
                
                <el-table-column label="用户财富等级" prop="is_show"></el-table-column>
                <el-table-column label="用户身份" prop="coin"></el-table-column>
                <el-table-column label="注册时间" prop="created_at"></el-table-column>
                
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                        >赠送实物
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
        <el-dialog
        :title="dialogTitle"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="35%"
        :info="info"
        @close="closeDialog"
    >
        <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">
            
            <el-form-item label="实物名称" prop="petId">
                <el-input
                    v-model="formData.petId"
                    placeholder="请输入实物名称"
                />
            </el-form-item>
            <el-form-item label="实物图片" prop="icon">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.icon, 'show_box': !formData.icon}">
                        <img v-if="formData.icon" :src="formData.icon" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            
            
            <el-form-item label="实物数量" prop="num">
                <el-input v-model="formData.num" placeholder="请输入兑换碎片数量" size="normal" clearable>
                    <template slot="append">个</template>
                </el-input>
            </el-form-item>
        </el-form>

        <section slot="footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit()">确定</el-button>
        </section>
    </el-dialog>
        
    </div>
</template>
  
<script>
    import { petEggIsShow, petEggList, shapeList } from '@/api/petsManagement'
  	export default {
        name: 'giveGiftList',
        data() {
            return {
                dialogTitle: 'add',
                dialogVisible: false,
                info: {},
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                petList: [],
                formData: {
                    petId: undefined,
                    name: undefined,
                    num: undefined,
                    icon: undefined
                },
                rules: {
                    name: [{ required: true, message: '请选择萌宠', trigger: 'blur' }],
                    num: [{ required: true, message: '请上传常规动效', trigger: 'blur' }],
                },
            }
        },
        created() {
            this.getTableData()
            this.getPetList()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            async getPetList() {
                const {data, code} = await shapeList({
                    page: 1,
                    perPage: 100
                })
                if (code === 200) {
                    this.petList = data
                }
        
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
                }
                const {data, code} = await petEggList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.data
                    this.total = data.total
                }
                this.loading = false
        
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
            },
            handleEdit(row) {
                this.dialogVisible = true
                this.dialogTitle = '编辑'
                this.info = row
            },
            handleSearch() {
                this.listQuery.page = 1
                this.getTableData()
            },
            handleReset() {
                this.listQuery = {
                    page: 1,
                    perPage: 10,
                    start_time: undefined,
                    end_time: undefined,
                    name: undefined
                }
                this.getTableData()
            },
            handlePictureSuccess() {
                this.formData.icon = this.ossLastImgUrl
            },
            handlePictureRemove() {
                this.formData.icon = undefined
            },
        }
    }
</script>
  
<style lang="scss" scoped>
.petIcon {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
}
.imgaes {
    width: 200px;
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
</style>
  